<!DOCTYPE html>

<html>
    
    <head>
        <meta charset=UTF-8>
        <title>TM Scroller | demo01</title>
        <style>
            
            body {
                background-color: black;
                color: white;
            }
            
            .wrap {
                min-height: 3000px;
            }
            
            nav {
                
            }
            
            section {
                margin: 50px;
                padding: 25px;
                min-height: 250px;
                background-color: white;
                color: black;
            }
        
        </style>
        
        <script type="text/javascript" src="../tm.scroller.js"></script>
        
        <script>
            var Scroller = tm.Scroller;
            
            window.onload = function() { Scroller.setup(); }
        </script>
    </head>
    <body>
        
        <header>
            <h1 id="top">TM Scroller - demo01</h1>
            <nav>
                <ul>
                    <li><a href="#section1" class="tm-scroller">To Section 1</a></li>
                    <li><a href="#section2" class="tm-scroller">To Section 2</a></li>
                    <li><a href="#section3" class="tm-scroller">To Section 3</a></li>
                    <li><a href="#section4" class="tm-scroller">To Section 4</a></li>
                    <li><a href="#section5" class="tm-scroller">To Section 5</a></li>
                    <li><a href="#section6" class="tm-scroller">To Section 6</a></li>
                </ul>
            </nav>
        </header>
        
        <div class="wrap">
            <section>
                <h1 id="section1">Section 1</h1>
                <a href="#section2" class="tm-scroller">To Section 2</a>
                <footer>
                    <a href="#top" class="tm-scroller">Top</a>
                </footer>
            </section>
            
            <section>
                <h1 id="section2">Section 2</h1>
                <a href="#section3" class="tm-scroller">To Section 3</a>
                <footer>
                    <a href="#top" class="tm-scroller">Top</a>
                </footer>
            </section>
            
            <section>
                <h1 id="section3">Section 3</h1>
                <a href="#section4" class="tm-scroller">To Section 4</a>
                <footer>
                    <a href="#top" class="tm-scroller">Top</a>
                </footer>
            </section>
            
            <section>
                <h1 id="section4">Section 4</h1>
                <a href="#section5" class="tm-scroller">To Section 5</a>
                <footer>
                    <a href="#top" class="tm-scroller">Top</a>
                </footer>
            </section>
            
            <section>
                <h1 id="section5">Section 5</h1>
                <a href="#section6" class="tm-scroller">To Section 6</a>
                <footer>
                    <a href="#top" class="tm-scroller">Top</a>
                </footer>
            </section>
            
            <section>
                <h1 id="section6">Section 6</h1>
                <a href="#section1" class="tm-scroller">To Section 1</a>
                <footer>
                    <a href="#top" class="tm-scroller">Top</a>
                </footer>
            </section>
        </div>
        
        <footer>
            <h1 id="bot"></h1>
            <a href="#top" class="tm-scroller">Top of page</a>
        </footer>
        
    </body>
</html>